require(['./config'], () => {
  require(['template', 'header', 'footer'], (template, header) => {
    class Shopping {
      constructor () {
        this.init()
      }
      init () {
        // 取出localStorage里存的购物车数据
        const cart = localStorage.getItem('cart')
		
        if (cart) {
          // 渲染表格
		  $('#cart-empty').hide()
          this.cart = JSON.parse(cart)
          $('#shop_tbody').html(
            template('cartTemplate', {  cart: this.cart })
          )
		  this.calcTotalMoney()
		  this.checksChange()
		  this.setAllCheck()
		  this.Trolley()
		  this.Delete()
        } else {
		  $('.head').hide()
		  $('#top-bar').hide()
		  $('#CheckOut').hide()
		  $('#shopping_car').hide()
		  $('#cart-empty').show()
        }
		header.calcCartCount()
      }
	checksChange () {
	    const _this = this
	    $('.checks').on('change', function () {
	      // 从父级tr身上取到自定义属性data-id
	      const id = $(this).parents('ul').data('id')
	      _this.cart = _this.cart.map(shop => {
	        if (shop.id === id) {
				
	          shop.check = $(this).prop('checked')
	        }
	        return shop
	      })
	      // 把修改好的cart重新存localStorage
	      localStorage.setItem('cart', JSON.stringify(_this.cart))
	      // 重新计算一次总价
	      _this.calcTotalMoney()
	      // 重新设置全选
	       _this.setAllCheck()
	    })
	  }
	  setAllCheck () {
		  const _this = this
		  	$("#all-check").click(function(){
				console.log($(this).prop("checked"))
		  		$("[name=cartCheckBox]").prop("checked",$(this).prop("checked"));
				_this.cart.map(shop => {
					shop.check = $(this).prop("checked")
					return shop
				})
				_this.calcTotalMoney()
		  	});
	    $('#all-check').prop('checked', this.cart.every(shop => shop.check))
	  }
	  Delete() {
		  const _this = this
		  $(".delete").click(function () {
			$(this).parents('ul').remove();//删除前一个tr
			
		  	const id = $(this).parents('ul').data('id')
			_this.cart = _this.cart.filter(shop => {
			  return shop.id != id
			})  
		    // 把修改好的cart重新存localStorage
		    localStorage.setItem('cart', JSON.stringify(_this.cart))
			var carts = JSON.parse(localStorage.getItem('cart'))
			console.log(carts.length )
			if (carts.length === 0) {
			console.log($('#top-bar'))
			console.log($('#cart-empty'))
			 $('.head').hide()
			 $('#top-bar').hide()
			 $('#CheckOut').hide()
			 $('#shopping_car').hide()
			 //console.log($('#shopping_car'))
			 $('#cart-empty').show()
			 localStorage.clear(carts)
			}
			
			_this.init()
		  })
		   
		      };
	  
		 Trolley (){
			 const _this = this
			 $(".add").on('click', function(){
			 			const id = $(this).parents('ul').data('id')
			 			 _this.cart.map(shop =>{
			 				if (shop.id === id){
			 					shop.count++
								if(shop.count>6)
									{
									alert("做人不要太贪心")
									shop.count=6
									}
			 					}
			 				 return shop
			 				})
			 				localStorage.setItem('cart', JSON.stringify(_this.cart)) 
			 				_this.init ()
			 			 })
			$(".reduce").on('click', function() {
						const id = $(this).parents('ul').data('id')
						 _this.cart.map(shop => {
							if (shop.id === id) {
								shop.count--
								if(shop.count < 1 )
								{alert("小兄弟，不能再减了，再减就没生意了")
								shop.count = 1}
								}
							 return shop
							})
							localStorage.setItem('cart', JSON.stringify(_this.cart)) 
							_this.init ()
						 })
					
			 
		}
		  	
	
	  
	  calcTotalMoney () {
	    // 第一次遍历的时候：
	    //   后面初始值就是money的值为0，shop就是this.cart[0]
	    //   判断shop是否选中，是的话money就加上这条商品的小计价格，并且把money return出去
	    // 第一次的return会作为下一次的money参数继续计算，这个时候shop就是this.cart[1]
	    //    再去判断shop是否选中，如果没有选中，那就直接return上一次的money，继续参与第三次运算
	    // 当遍历结束，外面的total拿到的就是最后所有选中商品的总价了
	    const total = this.cart.reduce((money, shop) => {
	      if (shop.check) {
	        money += shop.price * shop.count
	      }
	      return money
	    }, 0)
	    $('#Paymoney').html(total.toFixed(2))
	  }
	}
    new Shopping()
  })
})